<!-- 
@author wsq
@date  2016-11-13 
@搜索框 通过自定义事件向父级组件传递数据（不好）
-->
<template>
	<div class="c_searchBox" v-on:touchend='handleGetFocus'>
    <div class="searchInner">
      <span class='icon-search'></span>
      <input class="search" 
        v-model='value'
        ref='input'
        v-on:input='handelInput($event)' 
        v-on:focus='handelFocus($event)' 
        v-on:blur='handleBlur' 
        type="text" 
        name="search" 
        v-bind:placeholder='placeholder'
      >
    </div>
    
  </div>
</template>	

<script>
export default {
  name: 'search',
  props:['placeholder'],
  data () {
    return {
      value:'',
      focus:false
    }
  },
  methods:{
  	handelFocus:function(event){
      this.focus = true;
  		this.$emit('focus');
      event.target.parentNode.style.width='auto';
  	},
  	handleBlur:function(){
      this.focus = false;
  		this.$emit('blur');
  	},
  	handelInput:function(event){
  		this.$emit('input',{filterStr:event.target.value});
  	},
    handleGetFocus:function(){
      this.$refs.input.focus();
    }
  },
  watch:{
    value:function(){
      this.$emit('value',{filterStr:this.value});
    }
  }
}
</script>

<style>
.c_searchBox{
background-color: #f5f5f5;
border-radius:0.453333rem;
text-align: center;
overflow: hidden;
}
.searchInner{
  display: block;
  width: 5.906667rem;
  position: relative;
  margin: 0 auto;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
[data-dpr="1"] .searchInner{
   height: 34px;
   padding-top:5px;
   padding-bottom: 5px;
}
[data-dpr="2"] .searchInner{
  height: 68px;
  padding-top:10px;
   padding-bottom: 10px;
}
[data-dpr="3"] .searchInner{
  height: 102px;
  padding-top:15px;
  padding-bottom: 15px;
}
.searchInner .icon_del{
	position:absolute;
	width:0.4rem;
	height:0.4rem;
	top:0.24rem;
	right:0.4rem;
	background-color: red;
}
.icon-search{
position: absolute;
top:50%;
left: 0.4rem;
width:0.346667rem;
height:100%;
background: #000;
transform: translate(0,-50%);
background: url('../../src/images/search@2.png') no-repeat center center;
-webkit-background-size: 99%;
background-size:99%;
}
.search{
display: block;
width: 100%;
background-color: transparent;
border: 0;
outline:none;
text-align: left;
font-size:0.373333rem;
padding-left:1rem;
color: #4A4A4A;
}
[data-dpr="1"] .search{
   height: 24px;
   line-height: 24px;
   font-size: 14px;
}
[data-dpr="2"] .search{
  height: 48px;
  line-height: 48px;
  font-size: 28px;
}
[data-dpr="3"] .search{
  height: 72px;
  line-height: 72px;
  font-size: 42px;
}

</style>